<template>
  <div ref="customTimeline" class="custom-timeline w-100">
    <div v-for="(item, index) in list" :key="index" class="custom-timeline-item">
      <div ref="leftWarp" class="leftWarp">
        <p class="big">
          {{ item.name_ || item.end_time_ }}
        </p>
      </div>
      <div :class="[index === list.length - 1 ? 'dot' : 'line-dot']" />
      <div class="rightWarp">
        <el-collapse v-model="item.activeNames">
          <el-collapse-item :title="item.end_time_ || item.title" name="1">
            <div v-if="item.inst_task_id">
              <span class="mr-3">操作人：{{ item.assignee_ }}</span>
              <el-button type="primary" size="medium" @click="getHistoryProcessData(type, item)">
                查看
              </el-button>
            </div>
            <div v-else style="white-space: pre-wrap" v-html="item.msg" />
            <div v-if="item.files && item.files.length>0" style="display: flex;align-items: center">
              <div>附件列表：</div>
              <div>
                <el-link type="primary" @click="openAttachPopUp(item.files)">查看</el-link>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <el-empty v-if="list.length === 0" description="暂无数据" />
    <van-popup v-model="dialogHistory" position="right" :style="{ height: '100%', width: '100%' }">
      <van-nav-bar :title="title" left-arrow @click-left="dialogHistory = false" />
      <div class="p-3 vform-dialog">
        <v-form-render
          v-if="dialogHistory"
          ref="historyForm"
          :form-json="formJson2"
          :form-data="formData"
          :option-data="optionData"
        />
      </div>
    </van-popup>
    <attach-pop-up ref="attachPopUp" />
  </div>
</template>

<script>
import { AqHistoryProcessData, HbHistoryProcessData, NyHistoryProcessData, XfHistoryProcessData } from '@/api/activiti'
import commonList from '@/assets/mixin/commonList'
import AttachPopUp from '@/components/globals/attachPopUp.vue'

export default {
  components: { AttachPopUp },
  mixins: [commonList],
  props: {
    alarmId: {
      type: [Number, String],
      default: 0
    },
    type: {
      type: String,
      default: '能源'
    },
    alarmType: {
      type: [Number, String],
      default: ''
    },
    list: {
      type: Array,
      default: () => [
        {
          name_: '报警预警',
          title: '西南监控中心',
          end_time_: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '报警时间：2023-03-10 13:45\n报警参数：总氮\n报警值：75.04\n报警名称：污染因子（二类污染物）监测值超过排放许可值'
        },
        {
          name_: '下发督办',
          title: '四川建安工业有限责任公司',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '下发时间：2023-03-10 14:45\n处置时间：2023-03-11 12:00前\n处置要求：河北长安车间废水总排口于2023-03-10 13:45发生总氮报警，报警值为75.04，报警名称为污染因子（二类污染物）监测值超过排放许可值，请企业及时核查原因并进行反馈。'
        },
        {
          name_: '企业反馈',
          title: '报警企业',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '反馈时间：2023-03-11 09:22\n报警类型：采样点存在杂质\n报警备注：经核查，2023-03-10 13:45发生于河北长安车间废水总排口的总氮报警，报警原因为采样点存在杂志，导致采样设备采集到污泥。\n图片视频：'
        },
        {
          name_: '处置超时',
          title: '西南监控中心',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '超时报警时间：2023-03-11 12:00'
        },
        {
          name_: '处置信息',
          title: '报警企业',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '完成处置时间：2023-03-11 09:22\n处置结果：\n处置方式：\n处置预案：《河北长安关于废水在线监测超标的处置预案》.doc'
        },
        {
          name_: '解除报警',
          title: '西南监控中心',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '解除时间：2023-03-11 10:15\n审批意见：'
        },
        {
          name_: '报送集团',
          title: '西南监控中心',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '报送时间：2023-03-11 10:16'
        },
        {
          name_: '处置质疑',
          title: '集团公司',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '质疑时间：2023-03-12 09:34\n反馈时间：2023-03-12 12:00前'
        },
        {
          name_: '企业反馈',
          title: '报警企业',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '反馈时间：2023-03-11 09:22\n反馈要求：请企业重新进行处置并进行反馈。\n反馈内容：'
        }
      ]
    }
  },
  data() {
    return {
      dialogHistory: false,
      formJson2: {},
      formData: {},
      optionData: {},
      title: ''
    }
  },
  watch: {
    list: {
      handler(newVal) {
        this.initTimeLine()
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
    this.initTimeLine()
    console.log('list', this.list)
  },
  methods: {
    initTimeLine() {
      const tagItemArr = []
      if (this.$refs.customTimeline) {
        const tagItems = this.$refs.customTimeline.getElementsByClassName('leftWarp')
        Array.prototype.slice.call(tagItems).forEach((item) => {
          tagItemArr.push(item.clientWidth)
        })
        Array.prototype.slice.call(tagItems).forEach((item) => {
          item.style.width = Math.max(...tagItemArr) + 'px'
        })
      }
    },
    // 查看历史记录
    async getHistoryProcessData(type, row) {
      console.log(type, row)
      this.title = row.name_
      const api = {
        能源: NyHistoryProcessData,
        安全: AqHistoryProcessData,
        消防: XfHistoryProcessData,
        环保: HbHistoryProcessData
      }
      const { status, data: obj } = await api[type]({
        // inst_task_id: row.inst_task_id,
        // AlarmId: this.alarmId,
        instTaskID: row.inst_task_id,
        monitorAlarmId: this.alarmId,
        AlarmType: this.alarmType
      })
      if (status === 0) {
        this.dialogHistory = true
        this.formJson2 = obj.historyData ? JSON.parse(obj.historyData) : {}
        const fileData = {
          fileId_list: obj.fileIdList ? JSON.parse(obj.fileIdList) : ''
        }
        const imgData = {
          imgId_list: obj.imgIdList ? JSON.parse(obj.imgIdList) : []
        }
        this.$nextTick(() => {
          this.$refs['historyForm'].setFormData(fileData)
          this.$refs['historyForm'].setFormData(imgData)
        })
      }
    }
  }
}
</script>

<style lang="scss">
.el-dialog.drag-dialog.small-padding-dialog {
  width: 100% !important;
}

.render-form .dynamicPseudoAfter .el-upload-list .upload-file-list {
  height: auto;
  font-size: 14px;
  line-height: 16px;
}

.custom-timeline {
  .vform-dialog {
    .static-content-item {
      word-break: break-all;

      .fileAlert {
        display: none !important;
      }
    }

    .el-form-item__label {
      width: 100px !important;
      text-align: right;
    }

    .el-form-item__content {
      margin-left: 100px !important;
    }
  }

  .custom-timeline-item {
    display: flex;
    overflow: hidden;

    .leftWarp {
      width: 150px;
      height: auto;
      flex-shrink: 0;
      border-radius: 0;
      font-weight: bold;
      text-align: right;

      .big {
        display: inline-block;
        width: 140px;
        background: #eff1f4;
        border-radius: 50px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }

    .line-dot {
      width: 50px;
      flex-shrink: 0;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        bottom: 0;
        width: 2px;
        background: #0084ff;
        z-index: 8;
      }

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 22px;
        top: 9px;
        border-radius: 50px;
        border: 3px solid #0084ff;
        background: #fff;
        z-index: 9;
      }

      .line-dot {
        &::before {
          background: #0084ff00;
        }
      }
    }

    .dot {
      width: 50px;
      flex-shrink: 0;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 22px;
        top: 9px;
        border-radius: 50px;
        border: 3px solid #0084ff;
        background: #fff;
        z-index: 9;
      }

      .line-dot {
        &::before {
          background: #0084ff00;
        }
      }
    }

    .rightWarp {
      flex: 1;

      .el-collapse {
        border: none;
        margin-bottom: 20px;

        .el-collapse-item {
          .el-collapse-item__header,
          .el-collapse-item__wrap {
            border-bottom: none;
            border-top: none;
          }

          .el-collapse-item__header {
            height: 50px;
            line-height: 50px;
            transition: none;
            padding: 0 15px;
            padding-left: 0;
            color: #333;
            font-size: 16px;
            background: #f3f4f7;
          }
        }

        .el-collapse-item {
          margin-bottom: 0 !important;
        }

        .el-collapse-item__content {
          padding-bottom: 0;
          padding: 15px 15px;
          border: 1px solid #f3f4f7;
          border-radius: 5px;
        }

        .el-descriptions__body {
          color: #0a1c35;
        }
      }
    }

    &:first-child {
      .line-dot {
        &::before {
          top: 9px;
        }
      }
    }

    &:last-child {
      .el-collapse {
        margin-bottom: 0;
      }

      .line-dot {
        &::before {
          background: #f3f4f700 !important;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.vform-dialog {
  .el-upload {
    display: none !important;
  }
}

.van-nav-bar {
  background-color: #007bff !important;

  .van-nav-bar__title {
    color: white !important;
  }

  .van-nav-bar__left {
    i {
      color: white !important;
    }
  }
}
</style>
